<template>
	<view class="content">
		<button style="background-color: antiquewhite;" @click="onClearClick">清空收藏记录</button>
		<scroll-view>
			<view class="item" v-for="(item, index) in listData" :key="item.index">
				<view class="type">题目{{item.index+1}}</view>
				<view class="title">{{item.ask}}
				</view>
				<view class="analyse-tip">答案与解析</view>
				<text class="analyse-answer">{{item.question}}</Text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseObj
	} from '@/common/util.js'
	export default {
		data() {
			return {
				listData: [],
				hasLoad: false,
				pageNum: 1,
				pageSize: 10,
				isLoading: false,
				hasMore: false,
			}
		},
		methods: {
			onLoad(e) {
				this.load();
			},
			load() {
				let collectTimu = uni.getStorageSync('collect_timu');
				let uniqueArray = Array.from(new Set(collectTimu.map(item => item.index))).map(id => {
					return collectTimu.find(item => item.index === id);
				});
				this.listData = uniqueArray;
			},
			onClearClick() {
				uni.setStorageSync("collect_timu", []);
				uni.showToast({
					title: '已清空，请重新添加题目',
					icon: 'none'
				});
				this.load();
			},
			onItemClick(index) {
				// uni.navigateTo({
				// 	url: '/pages/index/singletimu?index=' + index
				// })
			}
		}
	}
</script>

<style>
	/* 子元素上下居中 */
	.flex-orient-center {
		align-items: center;
	}

	/* 子元素靠x轴右对齐*/
	.flex-orient-right {
		align-items: flex-end;
	}

	/* 子元素靠y轴右对齐 */
	.flex-pack-right {
		justify-content: flex-end;
	}

	/* 子元素左右居中 */
	.flex-pack-center {
		justify-content: center;
	}

	/* 子元素两端对齐 */
	.flex-pack-justify {
		justify-content: space-between;
	}

	.title-bar {
		border-bottom-color: #e0e0e0;
		border-bottom-width: 2rpx;
		border-bottom-style: solid;
		width: 100%;
		height: 108rpx;
	}

	.title_header {
		font-size: 36rpx;
		clolr: #000000;
	}

	.item {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		border-bottom-color: #e0e0e0;
		border-bottom-width: 2rpx;
		border-bottom-style: solid;
		background-color: #ffffff;
	}

	.type {
		font-size: 30rpx;
		color: #29B581;
	}

	.title {
		font-size: 30rpx;
		color: #1a1a1a;
		width: calc(100% - 40rpx);
		margin: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.analyse-tip {
		font-size: 32rpx;
		color: #ed675a;
		height: 40rpx;
		margin-bottom: 20rpx;
	}

	.analyse-answer {
		font-size: 32rpx;
		height: 40rpx;
		color: #ed675a;
		width: calc(100% - 40rpx);
		margin: 20rpx;
	}
</style>